import React, { Component } from 'react';
import { withRouter, Route, Switch } from 'react-router-dom';
import { RouteLayout } from 'weaver-mobile-page';

import RelatedMe from './RelatedMe';
import Noparticipating from './Noparticipating';
import Call from './Call';
import ResultList from './ResultList';
import Result from '../result';
import Fill from '../fill';

@withRouter
export default class VotingModal extends Component {
  render() {
    const { title } = this.props;
    return (
      <Switch>
        <Route
          key='fill'
          path='/voting/fill/:id'
          render={() => (
            <RouteLayout>
              <div key="fill" className="wm-route-layout">
                <Fill />
              </div>
            </RouteLayout>
          )}
        />
        <Route
          key='relatedme'
          path='/voting/relatedme'
          render={() => (
            <RouteLayout>
              <div key="relatedme" className="wm-route-layout">
                <RelatedMe />
              </div>
            </RouteLayout>
          )}
        />
        <Route
          key='noparticipating'
          path='/voting/noparticipating'
          render={() => (
            <RouteLayout>
              <div key="noparticipating" className="wm-route-layout">
                <Noparticipating />
              </div>
            </RouteLayout>
          )}
        />
        <Route
          key='call'
          path='/voting/call'
          render={() => (
            <RouteLayout>
              <div key="call" className="wm-route-layout">
                <Call />
              </div>
            </RouteLayout>
          )}
        />
        <Route
          key='resultList'
          path='/voting/resultList'
          render={() => (
            <RouteLayout>
              <div key="resultList" className="wm-route-layout">
                <ResultList />
              </div>
            </RouteLayout>
          )}
        />
        <Route
          key='join'
          path='/voting/join'
          render={() => (
            <RouteLayout>
              <div key="join" className="wm-route-layout">
                <RelatedMe />
              </div>
            </RouteLayout>
          )}
        />
        <Route
          key='result'
          path='/voting/result/:id'
          render={() => (
            <RouteLayout>
              <div key="result" className="wm-route-layout">
                <Result title={title} />
              </div>
            </RouteLayout>
          )}
        />
      </Switch>
    )
  }
}